<template>
  <div>
    <!-- 抽奖 -->
    <div id="fa">
      <div class="option">1</div>
      <div class="option">2</div>
      <div class="option">3</div>
      <div class="option">4</div>
      <div id="start" @click="start">开始</div>
      <div class="option">6</div>
      <div class="option">7</div>
      <div class="option">8</div>
      <div class="option">9</div>
    </div>

    <div
      style="
        width: 800px;
        margin: 10px auto;
        border: 1px solid #ccc;
        padding: 10px;
        text-align: center;
      "
    >
      <el-row :gutter="20" style="text-align: center">
        <el-col :span="8">
          <el-input
            name="name"
            v-model="shop"
            placeholder="请输入奖品名添加"
            @keyup.enter.native="add"
          ></el-input>
        </el-col>
        <el-col :span="4">
          <el-button type="primary" round icon="el-icon-plus" @click="add"
            >添加</el-button
          >
        </el-col>
      </el-row>
    </div>

    <div class="cont">
      <el-button
        type="warning"
        round
        :loading="loading"
        icon="el-icon-thumb"
        @click="start"
        v-if="list.length > 5"
        >开始</el-button
      >
      <div class="box">
        <div class="item" v-for="item in list">{{ item }}</div>
      </div>
    </div>
    {{ list }}
    <div class="shops">
      <div style="color: red">奖品预览/管理</div>
      <p v-for="(tag, i) in list">
        <el-tag closable @close="tagClose($event, i)">
          {{ tag }}
        </el-tag>
      </p>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      list: ["奖品1", "奖品2", "奖品3", "奖品4", "奖品5"],
      loading: false,
      shop: "",
    };
  },
  created() {},
  methods: {
    start() {
      // 逻辑：1.点击开始，触发一个定时器
      // 2.定时器内部，随机一个数，通过这个数来获取  奖品所在的元素
      // 3.必须设置一个时间点，停止定时器
      this.loading = true;
      let timer = null;
      let options = document.getElementsByClassName("option");
      // 设置一个初始值 作为时间判断
      let num = 0;
      // 1.触发一个定时器
      if (timer == null) {
        timer = setInterval(() => {
          num++;
          // 2.随机 0-7的数，通过数组下标获取具体选中的元素
          let ran = Math.round(Math.random() * (options.length - 0) + 0);
          // 3.1 把所有的元素都恢复原来样式
          for (let i = 0; i < options.length; i++) {
            options[i].style.backgroundColor = "rgb(83, 188, 226)";
          }
          // 3.2 给选中元素 添加样式（背景颜色）
          options[ran].style.backgroundColor = "orange";
          // 4.给定时器设置有效时间，停止定时器
          if (num >= 50) {
            // 50代表的是 业务要求
            clearInterval(timer);
            timer = null;
            this.loading = false;
            this.$message.success("恭喜你，抽中了" + options[ran].innerHTML);
            setTimeout(() => {
              {
                this.list.forEach((el, j) => {
                  if (ran == j) {
                    this.list.splice(ran, 1);
                    j--;
                  }
                });
                for (let i = 0; i < options.length; i++) {
                  options[i].style.backgroundColor = "rgb(83, 188, 226)";
                }
              }
            }, 1500);
          }
        }, 100);
      }
    },
    add() {
      if (this.shop) {
        this.list.push(this.shop);
        this.$message.success("成功添加" + this.shop);
        this.shop = "";
      }
    },
    // 标签关闭
    tagClose(e, i) {
      this.list.forEach((el, j) => {
        if (i == j) {
          this.list.splice(i, 1);
          j--;
        }
      });
    },
  },
};
</script>

<style scoped>
#fa {
  width: 600px;
  height: 600px;
  border: 1px solid red;
}
#fa > div {
  width: 33%;
  height: 33%;
  border: 1px solid red;
  float: left;
  line-height: 200px;
  text-align: center;
  font-size: 30px;
  font-weight: bold;
}
#start {
  cursor: pointer;
  background-color: pink;
}

.box {
  width: 100%;
  display: flex;
  align-items: center;
  box-sizing: border-box;
  flex-wrap: wrap;
  justify-content: flex-start;
}
.cont {
  width: 800px;
  min-width: 800px;
  margin: 0 auto;
  border: 2px dashed rgb(143, 178, 225);
  padding: 10px;
  text-align: center;
}
.item {
  margin-top: 10px;
  flex: 1;
  color: rgba(229, 17, 141, 0.598);
  width: calc((100% - 60px) / 6);
  min-width: calc((100% - 60px) / 6);
  max-width: calc((100% - 60px) / 6);
  border: 1px solid rgb(115, 178, 232);
  height: 60px;
  line-height: 60px;
  text-align: center;
  margin-right: 8px;
  border-radius: 5px;
  box-shadow: 2px 2px 3px rgb(124, 230, 161);
  background: rgb(83, 188, 226);
  transition: all 0.6s;
  clip-path: polygon(75% 0%,100% 50%,75% 100%,0% 100%,25% 50%,0% 0%);
}
.item:hover {
  background: rgb(94, 213, 191) !important;
  transform: scale(1.2);
  transition: all 0.6s;
  color: #fff;
  font-size: 16px;
  clip-path: polygon(100% 0%,75% 50%,100% 100%,25% 100%,0% 50%,25% 0%);
}
.shops {
  position: fixed;
  right: 0px;
  top: 100px;
  padding: 10px;
  border: 1px dashed rgb(82, 224, 163);
  border-right: none;
  text-align: center;
}
</style>